<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>指令</title>
        <style type="text/css">
            .container { display: flex ; border: 1px solid blue ;}
            .container>span { flex-basis: 200px ; line-height: 50px ; }
            .container>span:nth-child(2n) { background: #dedede ; }
            .container>span:nth-child(2n+1) { background: #fffab1 ; }
        </style>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>

        <div id="app">
            <input type="radio" v-model="person.age" value="17">17岁
            <input type="radio" v-model="person.age" value="18">18岁
            <input type="radio" v-model="person.age" value="19">19岁
            <hr>
            <p v-if="person.age > 18">{{person.name}}先生</p>
            <p v-else-if="person.age == 18">{{person.name}}同学永远十八岁</p>
            <p v-else>{{person.name}}同学</p>
            <hr>
            <div v-for="( course , index ) in courses" v-bind:key="course.id" class="container">
                <span>{{ index + 1 }}</span>
                <span>{{ course.id }}</span>
                <span>{{ course.name }}</span>
            </div>
        </div>

        <script type="text/javascript">
            const app = Vue.createApp({ 
                data(){
                    return {
                        person: { id: 2002 , name: '李白' , age: 18 },
                        courses: [
                            { id: 9123 , name: 'Java' } ,
                            { id: 7456 , name: 'C++' } ,
                            { id: 9678 , name: 'HTML/CSS' }
                        ]
                    }
                }
            });

            const vm = app.mount( "#app" );
            console.log( vm );
        </script>

        <ul>
            <li>v-if</li>
            <li>v-else-if</li>
            <li>v-else</li>
            <li>v-for</li>
            <li>v-model</li>
            <li>v-bind</li>
        </ul>
        
    </body>
</html>